<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <table id="grid-data" class="table table-bordered table-hover">
        　　<thead>
    　　　　<tr>
        　　　　　　<th data-column-id="UserName">@Html.LabelFor(m => m.UserName)</th>
        　　　　　　<th data-column-id="UserPhone">@Html.LabelFor(m => m.UserPhone)</th>
        　　　　　　<th data-column-id="CrateTime" data-order="desc">@Html.LabelFor(m => m.CrateTime)</th>
        　　　　　　<th data-column-id="link" data-formatter="commands" data-sortable="false">详细</th>
        　　</tr>
    　　</thead>
    </table>

    <div class="modal fade" id="detail-mod">
        　　<div class="modal-dialog" style="height: 700px ;width:900px">
        　　　　<div class="modal-content" id="detail-content">
        　　　　</div>
        　　</div>
    </div>

    <script type="text/javascript">
        $("#grid-data").bootgrid({
            ajax: true, //是否发生异步请求
            url: "${ctxPath}/address/list", //请求的Url  返回json格式数据
            formatters: {
                "commands": function (column, row) { //commands 参考上面 data-formatter="commands"  与前面一致即可
                    return "<a href=\"#\" class=\"command-detail\" data-row-id=\"" + row.UserId + "\">详细</a>&nbsp;" +
                        "<a href=\"#\" class=\"command-edit\" data-row-id=\"" + row.UserId + "\">编辑</a>&nbsp;" +
                        "<a href=\"#\" class=\"command-delete\" data-row-id=\"" + row.UserId + "\">删除</a>&nbsp;";
                }
            }
        }).on("loaded.rs.jquery.bootgrid", function () {
            /* Executes after data is loaded and rendered */
            grid.find(".command-detail").on("click", function (e) {
                $("#detail-mod").removeData("bs.modal");
                $("#detail-mod").modal({
                    remote: "../UserCenter/UserDetail?type=detail&userId=" + $(this).data("row-id") + "" //点击详细按钮时请求路径
                });
            }).end().find(".command-edit").on("click", function (e) {
                $("#detail-mod").removeData("bs.modal");//为了模态窗口加载时 移除之前的数据，否则，一直保留第一次的数据（个人认为）
                $("#detail-mod").modal({
                    //实现
                });
            }).end().find(".command-delete").on("click", function (e) {

                //实现

            });
        });

    </script>
</body>
</html>